<template>
  <div class="file-list">
    <div class="module-head">
      {{ title }}
    </div>
    <template v-if="list.length">
      <div v-for="(item, index) in list" :key="item.id" class="item">
        <img class="file-img" :src="item.fileName | extensionName | fileIcon" alt="" />
        <div class="file-name">
          <div class="name ellipsis" :title="item.fileName">{{ item.fileName }}</div>
          <span class="file-type" :title="item.fileName">
            {{ options[item.secondaryBusinessType] ? options[item.secondaryBusinessType] : "投诉举报附件" }}
          </span>
        </div>
        <div class="file-btn">
          <span
            v-if="
              item.secondaryBusinessType != 35 &&
              item.secondaryBusinessType != 21 &&
              item.secondaryBusinessType != 22 &&
              item.secondaryBusinessType != 26 &&
              item.secondaryBusinessType != 11 &&
              item.secondaryBusinessType != 12 &&
              item.secondaryBusinessType != 13 &&
              item.secondaryBusinessType != 14 &&
              (isCurrentWorkWorkProcessor || isLeaderDepartment)
            "
            @click="handleDelete(item, index)"
            class="color-danger pointer"
          >
            删除
          </span>
          <span @click="$emit('preview', item)" class="color-primary pointer">预览</span>
          <span @click="handleDownload(item)" class="color-primary pointer">下载</span>
        </div>
      </div>
    </template>
    <p v-else class="tips" style="margin: 10px 0">没有数据</p>
  </div>
</template>

<script>
import { extensionName, filename } from "@/utils/filters";
import * as fileApi from "@/api/file";
import * as mixins from "@/utils/mixins";
import { delAttachment } from "@/api/file";
import { rolePermissionsMixin } from "@/views/workOrder/mixin";

export default {
  name: "index",
  mixins: [mixins.dialog, mixins.form, rolePermissionsMixin],
  filters: {
    extensionName,
    filename,
    fileIcon(val) {
      if (".mov,.avi,.mp4,.wmv,.rmvb".includes(val)) val = "mp4";
      if (".zip,.7z,.rar".includes(val)) val = "other";
      return require(`../../assets/images/file/${val.toUpperCase()}.png`);
    },
  },
  data() {
    return {
      options: {
        11: "投诉举报附件",
        12: "授权委托书",
        13: "补正材料附件",
        14: "复议附件",
        15: "投诉书",
        16: "其他办案资料",
        21: "中止附件",
        22: "提交办结附件",
        23: "调查笔录",
        24: "审批表",
        25: "其他过程文档",
        26: "结案报告",
        27: "结案附件",
        31: "受理通知书",
        32: "不受理通知书",
        33: "结案通知书",
        34: "其他通知书",
        35: "佐证材料附件",
      },
    };
  },
  props: {
    title: { type: String, default: "" },
    list: { type: Array, default: Array },
    canDelete: { type: Boolean, default: false },
    details: { type: Object, default: Object },
  },
  methods: {
    handleDownload(row) {
      fileApi.download({
        downloadFileName: row.fileName,
        filePath: row.fileUrl,
      });
    },

    handleDelete(item, index) {
      this.$confirm("是否确认删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => fileApi.delAttachment({ id: item.id }))
        .then((res) => {
          this.$message.success("删除成功");
          this.$emit("delete");
        });
      //
    },
  },
  // .bmp,.jpg,.jpeg,.png,.tif,.gif,.mov,.avi,.mp4,.wmv,.rmvb,.docx,.pptx,.xlsx,.doc,.ppt,.xls,.pdf,.rar,.zip,.7z
};
</script>

<style lang="less" scoped>
.file-list {
  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 5px;
    border-bottom: 1px solid #d8d8d8;
    font-size: 14px;
    &:last-child {
      border-bottom: none;
    }
    .file-img {
      width: 30px;
      height: 30px;
      flex-shrink: 0;
    }

    .file-name {
      flex: 1;
      padding-left: 10px;
      flex: 1; //重点样式
      min-width: 0; //重点样式
      white-space: nowrap; //重点样式
      .name {
        width: 100%;
      }
      .file-type {
        color: #999999;
        display: block;
      }
    }
    .file-btn {
      display: flex;
      align-self: center;
      justify-content: flex-end;
      margin-left: 5px;
      .pointer {
        margin-left: 5px;
      }
    }
  }
}
</style>
